<template>
	<view class="page">
		<!-- 左侧导航 -->
		<scroll-view class="sidebar" scroll-y>
			<view 
				v-for="(item, index) in categories" 
				:key="index" 
				class="sidebar-item" 
				:class="{ active: activeIndex === index }"
				@tap="switchCategory(index)"
			>
				{{ item.name }}
			</view>
		</scroll-view>
		
		<!-- 右侧内容 -->
		<scroll-view 
			class="content" 
			scroll-y 
			scroll-with-animation 
			:scroll-into-view="toView"
			@scroll="onScroll"
			:scroll-top="scrollTop"
		>
			<!-- 广告区域 -->
			<view class="banner">
				<view class="banner-content">
					<text class="banner-title">爆款网红彩妆</text>
					<text class="banner-subtitle">超值5折  低至26元</text>
					<view class="banner-icon">
						<svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M3 6H21V8H3V6ZM3 11H21V13H3V11ZM3 16H21V18H3V16Z" fill="white"/>
							<path d="M19 17.5C19 18.8807 17.8807 20 16.5 20C15.1193 20 14 18.8807 14 17.5C14 16.1193 15.1193 15 16.5 15C17.8807 15 19 16.1193 19 17.5Z" fill="white"/>
							<path d="M9 17.5C9 18.8807 7.88071 20 6.5 20C5.11929 20 4 18.8807 4 17.5C4 16.1193 5.11929 15 6.5 15C7.88071 15 9 16.1193 9 17.5Z" fill="white"/>
						</svg>
					</view>
				</view>
			</view>
			
			<!-- 分类内容区域 -->
			<view v-for="(category, index) in categories" :key="index" :id="'category-'+index" class="category-section">
				<view class="category-title">{{ category.name }}</view>
				<view class="category-list">
					<view 
						v-for="(subItem, subIndex) in category.subCategories" 
						:key="subIndex"
						class="category-item"
					>
						<view class="category-item-icon">
							<svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<circle cx="12" cy="12" r="10" fill="#f0f0f0"/>
								<path v-if="subItem.type === 'lipstick'" d="M12 6V18M9 9H15M9 15H15" stroke="#FF6B6B" stroke-width="2"/>
								<path v-else-if="subItem.type === 'eyeshadow'" d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12Z" stroke="#8A7FFF" stroke-width="2"/>
								<path v-else d="M7 14C9.76142 14 12 11.7614 12 9C12 11.7614 14.2386 14 17 14C14.2386 14 12 16.2386 12 19C12 16.2386 9.76142 14 7 14Z" stroke="#FF9A8B" stroke-width="2"/>
							</svg>
						</view>
						<view class="category-item-name">{{ subItem.name }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 模拟分类数据
const categories = reactive([
	{
		name: '女装',
		subCategories: [
			{ name: '连衣裙', type: 'lipstick' },
			{ name: 'T恤', type: 'eyeshadow' },
			{ name: '牛仔裤', type: 'cleanser' }
		]
	},
	{
		name: '男装',
		subCategories: [
			{ name: '衬衫', type: 'lipstick' },
			{ name: '裤子', type: 'eyeshadow' },
			{ name: '外套', type: 'cleanser' }
		]
	},
	{
		name: '女鞋',
		subCategories: [
			{ name: '高跟鞋', type: 'lipstick' },
			{ name: '平底鞋', type: 'eyeshadow' },
			{ name: '运动鞋', type: 'cleanser' }
		]
	},
	{
		name: '男鞋',
		subCategories: [
			{ name: '皮鞋', type: 'lipstick' },
			{ name: '休闲鞋', type: 'eyeshadow' },
			{ name: '帆布鞋', type: 'cleanser' }
		]
	},
	{
		name: '内衣配饰',
		subCategories: [
			{ name: '内衣', type: 'lipstick' },
			{ name: '配饰', type: 'eyeshadow' },
			{ name: '袜子', type: 'cleanser' }
		]
	},
	{
		name: '箱包手袋',
		subCategories: [
			{ name: '手提包', type: 'lipstick' },
			{ name: '双肩包', type: 'eyeshadow' },
			{ name: '钱包', type: 'cleanser' }
		]
	},
	{
		name: '美妆护肤',
		subCategories: [
			{ name: '口红', type: 'lipstick' },
			{ name: '眼影', type: 'eyeshadow' },
			{ name: '洗面奶', type: 'cleanser' }
		]
	},
	{
		name: '个护清洁',
		subCategories: [
			{ name: '沐浴露', type: 'lipstick' },
			{ name: '洗发水', type: 'eyeshadow' },
			{ name: '护发素', type: 'cleanser' }
		]
	},
	{
		name: '钟表珠宝',
		subCategories: [
			{ name: '手表', type: 'lipstick' },
			{ name: '项链', type: 'eyeshadow' },
			{ name: '戒指', type: 'cleanser' }
		]
	},
	{
		name: '食品生鲜',
		subCategories: [
			{ name: '零食', type: 'lipstick' },
			{ name: '水果', type: 'eyeshadow' },
			{ name: '蔬菜', type: 'cleanser' }
		]
	},
	{
		name: '母婴',
		subCategories: [
			{ name: '奶粉', type: 'lipstick' },
			{ name: '尿不湿', type: 'eyeshadow' },
			{ name: '玩具', type: 'cleanser' }
		]
	},
	{
		name: '酒水饮料',
		subCategories: [
			{ name: '白酒', type: 'lipstick' },
			{ name: '啤酒', type: 'eyeshadow' },
			{ name: '果汁', type: 'cleanser' }
		]
	},
	{
		name: '彩妆',
		subCategories: [
			{ name: '口红', type: 'lipstick' },
			{ name: '眼影', type: 'eyeshadow' },
			{ name: '洗面奶', type: 'cleanser' }
		]
	}
]);

// 当前激活的分类索引
const activeIndex = ref(0);
// 滚动位置
const scrollTop = ref(0);
// 目标视图
const toView = ref('category-0');

// 切换分类
const switchCategory = (index) => {
	activeIndex.value = index;
	toView.value = `category-${index}`;
};

// 监听滚动事件
const onScroll = (e) => {
	// 获取所有分类区域的位置信息
	const query = uni.createSelectorQuery();
	categories.forEach((item, index) => {
		query.select(`#category-${index}`).boundingClientRect();
	});
	
	query.exec((res) => {
		if (!res || !res[0]) return;
		
		// 寻找第一个在可视区域内的元素
		const scrollTop = e.detail.scrollTop;
		for (let i = 0; i < res.length; i++) {
			const el = res[i];
			if (el && el.top <= 100 && el.bottom >= 0) {
				activeIndex.value = i;
				break;
			}
		}
	});
};

// 页面加载时初始化
onMounted(() => {
	// 可以添加初始化逻辑
});
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		background-color: #f5f5f5;
	}

	.sidebar {
		width: 25%;
		height: 100%;
		background-color: #ffffff;
	}

	.sidebar-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 14px;
		color: #333;
		border-left: 3px solid transparent;
	}

	.sidebar-item.active {
		color: #ff6b6b;
		background-color: #f5f5f5;
		border-left: 3px solid #ff6b6b;
		font-weight: bold;
	}

	.content {
		width: 75%;
		height: 100%;
	}

	.banner {
		padding: 10px;
		width: 100%;
		height: 100px;
		margin-bottom: 10px;
	}

	.banner-content {
		width: 100%;
		height: 100%;
		background-color: #9d84ff;
		border-radius: 10px;
		color: white;
		position: relative;
		padding: 20px;
	}

	.banner-title {
		font-size: 18px;
		font-weight: bold;
		display: block;
	}

	.banner-subtitle {
		font-size: 14px;
		margin-top: 5px;
		display: block;
	}

	.banner-icon {
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.category-section {
		padding: 10px;
	}

	.category-title {
		font-size: 16px;
		font-weight: bold;
		padding: 10px 0;
	}

	.category-list {
		display: flex;
		flex-wrap: wrap;
	}

	.category-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 0;
	}

	.category-item-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-bottom: 5px;
		overflow: hidden;
	}

	.category-item-name {
		font-size: 12px;
		color: #333;
	}
</style>
